<template>
    <div class="Improve_Shop_Detail">
        <Header></Header>
        <div class="Improve_Shop_Detail_PC">
            <div class="author">
                    <div class="left">
                        <img src="@/assets/Improve_Shop_Detail4.jpg" class="img">
                    </div>
                    <div class="right">
                        <div class="name">
                            蠢呆笨的傻孩子
                        </div>
                        <div class="signature">
                            我傻我自豪
                        </div>
                    </div>
            </div>
            <div class="content">
                
                <div class="content_left">
                    <div class="display_num1">
                        <div class="left">
                            <div class="header">
                                <div class="title">
                                    <h2>{{strategy_info.name}}</h2>
                                    <el-tag>标签一</el-tag>
                                    <el-tag type="success">标签二</el-tag>
                                    <el-tag type="info">标签三</el-tag>
                                    <el-tag type="warning">标签四</el-tag>
                                </div>
                            </div>
                            <ul>
                                <li>
                                    <p class="title">累计收益</p>
                                    <p class="content red">{{strategy_info.realIncome}}</p>
                                </li>
                                <li>
                                    <p class="title">胜率</p>
                                    <p class="content">{{strategy_info.Victories}}</p>
                                </li>
                                <li>
                                    <p class="title">盈亏比</p>
                                    <p class="content">{{strategy_info.vRate}}</p>
                                </li>
                                <li><p class="title">最大回撤</p>
                                    <p class="content">{{strategy_info.maxRetracement}}</p>
                                </li>
                            </ul>
                            <ul>
                                <li v-for="(item,index) in strategy_info.monthsIncome"  :key="index">
                                    <p>{{item.month}} <span class="red">{{item.income}}</span></p>
                                </li>
                            </ul>

                        </div>
                        <div class="right">
                            <div class="echart1_1" ref="echart1_1"></div>
                            <p>已经超过了<span class="median-red">{{strategy_info.Victories}}</span>的策略</p>
                        </div>
                        
                    </div>
                    <div class="display_num3">
                        <div class="left">
                            <h4>策略信息</h4>
                            <div class="echart1_2" ref="echart1_2"></div>
                            <ul class="detail">
                                <li>
                                    <p class="title">交易标的：</p>
                                    <p class="content">{{strategy_info.category}}</p>
                                </li>
                                <li>
                                    <p class="title">交易时间：</p>
                                    <p class="content">{{strategy_info.dealDate}}</p>
                                </li>
                                <li>
                                    <p class="title">交易频率：</p>
                                    <p class="content">{{strategy_info.frequency}}</p>
                                </li>
                                <li>
                                    <p class="title">同时持股数：</p>
                                    <p class="content">{{strategy_info.maxStocksNum}}</p>
                                </li>
                                <li>
                                    <p class="title">开始时间：</p>
                                    <p class="content">{{strategy_info.startDate}}</p>
                                </li>
                            </ul>
                        </div>
                        <div class="right">
                            <h4>模拟交易收益率</h4>
                            <div class="echart1_3" ref="echart1_3"></div>
                        </div>
                    </div>
                    <div class="display_num4">
                        <h4>
                            <span>策略持仓</span>
                        </h4>
                        <div class="line-text">
                            <div class="text">当前持仓</div>
                            <div class="line"></div>
                            <div class="history">
                                <div class="text">
                                    历史持仓
                                </div>
                                <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </div>
                        <el-table
                        :data="currRepositoryData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="name"
                        label="股票"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="number"
                        label="数量"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="mcapitalization"
                        label="市值"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="cvalue"
                        label="成本价"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="pvalue"
                        label="现价"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="position"
                        label="仓位"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="todaypal"
                        label="当日盈亏"
                        width="140">
                        </el-table-column>
                        <el-table-column
                        prop="totalpal"
                        label="累计盈亏"
                        width="140">
                        </el-table-column>
                    </el-table>
                    <div class="brick"></div>
                    <div class="line-text">
                            <div class="text">最新调仓</div>
                            <div class="line"></div>
                            <div class="history">
                                <div class="text">
                                    历史调仓
                                </div>
                                <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                                </el-date-picker>
                            </div>
                        </div>
                        <el-table
                        :data="adjustRepositoryData"
                        stripe
                        style="width: 100%">
                        <el-table-column
                        prop="name"
                        label="股票"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="date"
                        label="时间"
                        width="200">
                        </el-table-column>
                        <el-table-column
                        prop="sellOrBuy"
                        label="操作"
                        width="190">
                        </el-table-column>
                        <el-table-column
                        prop="num"
                        label="数量"
                        width="180">
                        </el-table-column>
                        <el-table-column
                        prop="position"
                        label="仓位"
                        width="170">
                        </el-table-column>
                        <el-table-column
                        prop="averagePrice"
                        label="成交均价"
                        width="190">
                        </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="content_right">
                    <div class="title">
                        近三个月牛股
                    </div>
                    <div class="rank_list">
                        <div class="rank">
                            <div class="left">
                                <img src="@/assets/Improve_Shop_Detail1.jpg" class="img">  
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <img src="@/assets/Improve_Shop_Detail2.jpg" class="img">  
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                        <div class="rank">
                            <div class="left">
                                <img src="@/assets/Improve_Shop_Detail3.jpg" class="img">  
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                        <div class="rank">
                            <div class="left">
                                <div class="text">
                                    4
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <div class="text">
                                    5
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <div class="text">
                                    6
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <div class="text">
                                    7
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <div class="text">
                                    8
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <div class="text">
                                    9
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                         <div class="rank">
                            <div class="left">
                                <div class="text">
                                    10
                                </div> 
                            </div>
                            <div class="middle">
                                <div class="text">
                                    中钢天源
                                </div>
                            </div>
                            <div class="right">
                                <div class="text">
                                    41.8%
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="Improve_Shop_Detail_Mobile">
            <div class="trend-box shadow-border">
                <div class="title">{{strategy_info.name}}</div>
                <div class="echart2_1" ref="echart2_1"></div>
            </div>
            <div class="introduce shadow-border">
                <div class="income-part">
                    <div class="left">
                        <div class="title">
                        累计收益
                        </div>
                        <div class="content big-red">
                            {{strategy_info.realIncome}}
                        </div>
                    </div>
                    <div class="right">
                        <div class="echart2_2" ref="echart2_2"></div>
                        <div class="explain">已经超过了<span class="median-red">{{strategy_info.Victories}}</span>的策略</div>
                    </div>
                    <div class="clear"></div>
                </div>
                <ul class="months-income">
                    <li v-for="(item,index) in strategy_info.monthsIncome" :key="index">
                        <div class="title">
                            {{item.month}}
                        </div>
                        <div class="content">
                            {{item.income}}
                        </div>
                    </li>
                </ul>
            </div>
            <div class="detail-box num1 shadow-border">
                <div class="title">当前持仓</div>
                <el-table
                    :data="currRepositoryDataMobile"
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="股票"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="numberAndmcapitalization"
                    label="数量/市值"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="cValueAndPValue"
                    label="成本/现价"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="totalpal"
                    label="盈亏">
                    </el-table-column>
                </el-table>
            </div>
            <div class="detail-box num2 shadow-border">
                <div class="title">当前持仓</div>
                <el-table
                    :data="adjustRepositoryDataMobile"
                    stripe
                    style="width: 100%">
                    <el-table-column
                    prop="name"
                    label="股票"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="sellOrBuy"
                    label="操作"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="position"
                    label="仓位"
                    width="160">
                    </el-table-column>
                    <el-table-column
                    prop="averagePrice"
                    label="成交均价">
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Super_Stock_Card from '@/components/cards/Super_Stock_Card.vue'
import { constants } from 'crypto';
var echarts = require('echarts');
export default {
    name: 'Improve_Shop_Detail',
    data(){
        return {
            strategy_info:{
                id: 1,
                name: '阳光海岸造妖股',
                tags: ['小市值','收益高','赚钱','跑赢指数','股票少'],
                realIncome: '20%',
                realDays: "3",
                todayIncome: '-1.2%',
                Victories: '75,71%',
                vRate: '1103.46%',
                maxRetracement:'16.95%',
                price: "800",
                suitableFund:'10-30万',
                remaining:"27",
                monthsIncome: [{
                        month:'最近一月',
                        income: '5.13%'
                    },
                    {
                        month:'最近三月',
                        income: '30.59%'
                    },
                    {
                        month:'最近六个月',
                        income: '86.81%'
                    },
                    {
                        month:'最近一年',
                        income: '86.81%'
                    }
                ],
                category:'主板上市股票',
                dealDate: '2019-07-09',
                frequency: '1-5次/周',
                maxStocksNum: '1-3只',
                startDate: '2019-02-14',
                date: ['2018','2019','2020'],
                strategyIncome: [23,34,12],
                baseIncome: [1,1.2,0.5],
                introduce: '这是书记的策略',
                currRepository:[{
                        name: '康强电子',
                        number: '3300股',
                        mcapitalization: '101亿',
                        cvalue : '11.2',
                        pvalue:'15.2',
                        position: '34.25%',
                        todaypal:'-1782 / -2.71%',
                        totalpal: '-3465 / -5.14%'
                    },
                    {
                        name: '**********',
                        number: '4700股',
                        mcapitalization: '**********',
                        cvalue : '**********',
                        pvalue:'**********	',
                        position: '40.31%',
                        todaypal:'	2773 / 3.83%',
                        totalpal: '723 / 0.97%'
                    },
                ],
                adjustRepository:[{
                    name : '**********',
                    date: '2019-08-01',
                    sellOrBuy: '卖',
                    num : '-3200股',
                    position: '	25.7%',
                    averagePrice: '**********'
                },
                {
                    name : '**********',
                    date: '2019-08-01',
                    sellOrBuy: '买',
                    num : '	2300股',
                    position: '	25.1%',
                    averagePrice: '**********'
                }]
            },
            Super_Stock_Card_List: [{
                    id:1,
                    name: '康强电子',
                    increase: '21.2%',
                    buyingPrice: 11.1,
                    sellingPrice: 16,
                    holdingDays: 10

                },
                {
                    id:2,
                    name: '康强电子',
                    increase: '21.2%',
                    buyingPrice: 11.1,
                    sellingPrice: 16,
                    holdingDays: 10

                },
                {
                    id:3,
                    name: '康强电子',
                    increase: '21.2%',
                    buyingPrice: 11.1,
                    sellingPrice: 16,
                    holdingDays: 10

            }],
            currRepositoryData: [],
            adjustRepositoryData:[],
            currRepositoryDataMobile:[],
            adjustRepositoryDataMobile:[],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [{
                    text: '今天',
                    onClick(picker) {
                    picker.$emit('pick', new Date());
                    }
                }, {
                    text: '昨天',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24);
                    picker.$emit('pick', date);
                    }
                }, {
                    text: '一周前',
                    onClick(picker) {
                    const date = new Date();
                    date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', date);
                    }
                }]
            },
            value1: '',
            value2: '',
            echart1_1:{
                option : {
                    tooltip: {
                        trigger: 'item',
                        formatter: "超过{d}%"
                    },
                    series: [
                        {
                            name : '智子1号',
                            type:'pie',
                            radius: ['50%', '80%'],
                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '16',
                                        fontWeight: 'bold'
                                    }
                                },
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:[
                                {value:80, name:'智子1号'},
                                {value:20, name:''},
                            ]
                        }
                    ]
                }
            },
            echart1_2:{
                option : {
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series : [
                        {
                            name: '持仓',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:99, name:'持仓'},
                                {value:1, name:'银行存款'},
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            },
            echart1_3:{
                option:{}
            },
            echart2_1:{},
            echart2_2:{}
        }
    },
    created(){
        this.currRepositoryData = this.strategy_info.currRepository
        this.adjustRepositoryData = this.strategy_info.adjustRepository
        this.echart2_1=this.echart1_3
        this.echart2_2=this.echart1_1
        this.mergeData()
    },
    mounted(){
        this.initEchart(this.$refs.echart1_1)
        this.initEchart(this.$refs.echart1_2)
        this.test()
        this.initEchart(this.$refs.echart1_3)

        this.initEchart(this.$refs.echart2_1)
        this.initEchart(this.$refs.echart2_2)

    },
    methods:{
        initEchart(ele){
            console.log(ele)
            var myChart = echarts.init(ele)
            myChart.setOption(this[ele.className].option)
        },
        test(){
            var base = +new Date(1968, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var date = [];

            var data1 = [Math.random() * 300];
            var data2 = [Math.random() * 300];
            for (var i = 1; i < 20000; i++) {
                var now = new Date
                (base += oneDay);
                date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                data1.push(Math.round((Math.random() - 0.5) * 20 + data1[i - 1]));
                data2.push(Math.round((Math.random() - 0.5) * 10 + data2[i - 1]));
            }

            var option = {
                tooltip: {
                    trigger: 'axis',
                    position: function (pt) {
                        return [pt[0], '10%'];
                    }
                },
                legend:{
                    x: 'right',
                    y: 10,
                    padding: 10,
                    itemGap:10,
                    data: ['策略收益','沪深300']
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: date
                },
                yAxis: {
                    type: 'value',
                    position: 'right',
                    boundaryGap: [0, '100%'],
                    axisLabel: {
                        formatter: '{value}%'
                    },
                    axisTick: {
                        show: true,
                        inside: true,
                    }
                },
                dataZoom: [{
                    type: 'inside',
                    start: 0,
                    end: 10
                }, {
                    start: 0,
                    end: 10,
                    handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                    handleSize: '80%',
                    handleStyle: {
                        color: '#fff',
                        shadowBlur: 3,
                        shadowColor: 'rgba(0, 0, 0, 0.6)',
                        shadowOffsetX: 2,
                        shadowOffsetY: 2
                    }
                }],
                series: [
                    {
                        name:'策略收益',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: 'rgb(69, 114, 167)'
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgb(188, 197, 207)'
                            }, {
                                offset: 1,
                                color: 'rgb(180, 190, 200)'
                            }])
                        },
                        data: data1
                    },
                    {
                        name:'沪深300',
                        type:'line',
                        smooth:true,
                        symbol: 'none',
                        sampling: 'average',
                        itemStyle: {
                            color: 'rgb(255, 90, 90)'
                        },
                        data: data2
                    }
                ]
                
            }
            this.echart1_3.option = option
        },
        mergeData(){
            this.strategy_info.currRepository.forEach(element => {
                var tempobj = {
                    name: element.name,
                    numberAndmcapitalization: element.number+'\n'+element.mcapitalization,
                    cValueAndPValue : element.cvalue+'\n'+element.pvalue,
                    totalpal:element.totalpal,
                }
                this.currRepositoryDataMobile.push(tempobj)
            })
            this.strategy_info.adjustRepository.forEach(element => {
                var tempobj = {
                    name : element.name,
                    sellOrBuy: element.sellOrBuy,
                    position: element.position,
                    averagePrice: element.averagePrice
                }
                this.adjustRepositoryDataMobile.push(tempobj)
            })
        }
    },
    components:{
        Header,
        Super_Stock_Card,
    }
}
</script>

<style scoped>

.black{
    color: #121212;
    font-size: 15px;
}
.big-red{
    color: #f00 !important;
    font-size: 30px;
    font-weight: bolder;
}
.median-red{
    font-size: 18px;
    font-weight: bold;
    color: #f11 !important
}
.red{
    color: #f11 !important;
}
.brick{
    height: 50px;
}
.shadow-border{
    border-radius: 5px;
    box-shadow: 0px 0px 10px 1px #dfdfdf;
    background-color: #fff;
}
.clear{
    clear: both;
}
@media screen and (min-width: 981px) {
    .Improve_Shop_Detail_Mobile{
        display: none;
    }
    .Improve_Shop_Detail_PC{
        display: block;
        width: 100%;
        background-color: #efefef;
        padding-top:56px;
    }
    .author{ 
        width:100%;
        height: 60px;
        background: white;
    
    }
    .author .left{
        float: left;
        margin-left:20px;
        margin-top:10px; 
        width:40px;
        height: 60px;
    }
    .author .right{
        float: left;
        margin-left:20px;
        width:200px;;
        height: 60px;
    }
    .author .left .img{
        width:40px;
        height: 40px;
    }
    .author .right .name{ 
        margin-top:5px;
        margin-left:5px; 
        width:200px;
        height: 30px;
        font-size: 15px;
        line-height: 30px;
        color: black;
    }
    .author .right .signature{
        margin-left:5px;
        width:200px;
        height: 20px;
        font-size: 12px;
        line-height: 20px;
        color: black;
    }
    .content{
        margin: 10px 20px 0 20px;
        border-top: 1px solid #efefef;
        width:80%;
        margin: 60px auto 0px;
    }
    .content_left{
        float: left;
        width:75%;
        height: auto;
        margin-right:2%; 
    }
    
    .display_num1{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-top: 20px; 
    }
    .display_num1 .left,.display_num1 .right{
        border-radius: 5px;
        box-shadow: 0px 0px 10px 1px #dfdfdf;
        background-color: #fff;
    }
    .display_num1 .left{
        width: 65%;
        height: 360px;
        box-sizing: border-box;
        padding: 12px 0px 0px 20px;
    }
    .display_num1 .right{
        width: 30%;
        height: 360px;
    }
    .display_num1 .left .header{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        text-align: center;
        width: 100%;
    }
    .display_num1 .left .header .title{
        width: 100%;
    }
    .display_num1 .left .header .title h2{
        width: 100%;
        line-height: 50px;
        font-size: 29px;
    }
    .display_num1 .left .header .title .el-tag{
        margin: 8px 5px 0px 0px;
    }
    .display_num1 .left .header .sell{
        list-style-type: none;
        width: 40%;
        margin-top: 40px;
    }
    .display_num1 .left .header .sell li{
        line-height: 40px;
        font-size: 13px;
        color: #9a9a9a;
    }
    .display_num1 .left > ul{
        list-style-type: none;
        height: 100px;
        margin: 20px 0px;
    }
    .display_num1 .left > ul li{
        float: left;
        width: 25%;
        height: 100px;
    }
    .display_num1 .left > ul li p{
        width: 100%;
        height: 50px;
        line-height: 50px;
        margin: 0px;
        text-align: center;
    }
    .display_num1 .left > ul li .title{
        font-size: 13px; 
    }
    .display_num1 .left > ul li .content{
        font-size: 26px;
        font-weight: bolder;
        color: #121212;
    }
    .display_num1 .right  .echart1_1{
        margin-top: 20px;
        width: 100%;
        height: 240px;
    }
    .display_num1 .right > p{
        font-size: 14px;
        color: #9a9a9a;
        text-align: center;
    }
    .display_num1 .right .button-box{
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
    }
    .display_num1 .right .el-button{
        width: 45%;
        height: 50px;
         
        font-size: 18px;
    }
    .display_num2{
        width: 100%;
        margin-top: 20px; 
        background-color: #fff;
    }
    .display_num2 .super-stock-box{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    .display_num2 .super-stock-box .Super_Stock_Card{
        width: 32%;
        margin: 20px 0px;
    }
    .display_num3{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-top: 40px;
       
    }
    .display_num3 .left,.display_num3 .right{
        border-radius: 5px;
        box-shadow: 0px 0px 10px 1px #dfdfdf;
        background-color: #fff;
     }
    .display_num3 .left{
        width: 25%;
        height: 480px;
        box-sizing: border-box;
        padding: 5px;
    }
    .display_num3 .right{
        width: 73%;
        height: 480px;
    }
    .display_num3 .left h4{
        margin-top:15px;
        line-height: 40px;
        text-indent: 5px;
        color: #565656;
    }
    .display_num3 .left .echart1_2{ 
        width: 100%;
        height: 150px;
    }
    .display_num3 .detail{
        list-style-type: none;
        margin-top: 20px;
    }
    .display_num3 .detail li{
        height: 40px;
        margin-top: 10px;
    }
    .display_num3 .detail li .title{
        display: inline-block;
        width: 40%;
        text-align: right;
    }
    .display_num3 .detail li .content{
        display: inline-block;
        width: 60%;
        border: none;
        margin: 0px;
    }
    .display_num3 .right{
        box-sizing: border-box;
        padding: 5px
    }
    .display_num3 .right h4{
        margin-top: 15px;
        line-height: 40px;
        text-indent: 5px;
        color: #565656;
    }
    .display_num3 .right .echart1_3{
        width: 98%;
        height: 80%;
    }
    .display_num4{
        padding: 5px 5px 0px 15px;
        box-sizing: border-box;
        margin-top: 30px;
        border-radius: 5px;
        border-top: 1px solid #fff;
        box-shadow: 0px 0px 10px 1px #dfdfdf;
        background-color: #fff;
    }
    .display_num4 h4{
        margin-top: 15px;
        margin-bottom: 20px; 
        line-height: 40px;
        color: #565656;
        border-bottom: 1px solid #efefef;
    }
    .display_num4 h4 span{
        display: inline-block;
        height: 100%;
        border-bottom: 4px solid #7a7a7a;
    }   
    .display_num4 .line-text{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        line-height: 45px;
    }
    .display_num4 .line-text > .text{
        width: 6%;
        font-size: 14px;
        color: #8a8a8a;
    }
    .display_num4 .line-text .line{
        width: 65%;
        height: 0px;
        margin-top: 1.7%;
        border-bottom: 2px solid #dfdfdf;
    }
    .display_num4 .line-text .history{
        display: flex;
        justify-content: space-around;
        flex-wrap: nowrap;
        width: 29%; 
    }
    .display_num4 .line-text .history > .text{
        font-size: 14px;
        color: #8a8a8a;
    }
    .content_right{
        float: right;
        width:23%;
        height: auto;
    }
    .content_right .title{
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        margin-top: 22px;
        font-size:23px;
        height: 40px; 
    }
    .content_right .rank_list{
        width:100%;
        height: 530px;
        box-sizing: border-box;
        padding:15px 20px 15px 20px;
        background: white;
    }
    .content_right .rank_list .rank{
        width:100%;
        height: 50px;
        box-sizing: border-box;
        padding:15px 0 15px 0;
    }
    .content_right .rank_list .rank .left{
        float: left;
        width:20%;
        height: 20px;   
    }
    .content_right .rank_list .rank .left .text{
        float: left;
        width:60%;
        height: 20px; 
        font-size: 18px;
        line-height: 20px;
        text-align: center;
    }
    .content_right .rank_list .rank .left .img{
        width:30px;
        height: 20px;
    }
    .content_right .rank_list .rank .middle{
        float: left;
        width:40%;
        height: 20px;  
    }
    .content_right .rank_list .rank .middle .text{
        float: left;
        width:100%;
        height: 20px;
        font-size: 15px;
        line-height: 20px;
        text-align: center;
    }
    .content_right .rank_list .rank .right{
        float: right;
        width:40%;
        height: 20px;  
    }
    .content_right .rank_list .rank .right .text{
        width:100%;
        height: 20px;  
        font-size: 20px;
        line-height: 20px;
        color: rgb(253, 7, 7);
        text-align: center;
    }

}
@media screen and (max-width: 980px){
    .Improve_Shop_Detail_PC{
        display: none;
    }
    .Improve_Shop_Detail_Mobile{
        display: block;
        border-top: 1px solid #fff;
    }
    .trend-box{
        margin-top: 55px; 
    }
    .trend-box>.title{
        line-height: 34px;
        font-size: 26px;
        text-align: center; 
        color: #121212;   
    }
    .trend-box .echart2_1{
        width: 100%;
        height: 340px;
        padding-right:20px; 
    }
    .introduce{
        margin-top: 20px; 
        border-top: 1px solid #fff;
    }
    .introduce .income-part .left{
        float:left;
        width: 49.5%;
        border-right: 0.5px solid #dfdfdf; 
    }
    .introduce .income-part .left>.title{
        line-height: 34px;
        margin-top: 34px;
        font-size: 18px;
        text-align: center;
        color: #7a7a7a;
    }
    .introduce .income-part .left>.content{
        line-height: 70px;
        text-align: center;
    }
    .introduce .income-part .right{
        float: left;
        width: 49.5%;
        border-left: 0.5px solid #dfdfdf; 
    }
    .introduce .income-part .right .echart2_2{
        width: 100%;
        height: 100px;
    }
    .introduce .income-part .right .explain{
        line-height: 24px;
        margin-top: 8px;
        margin-bottom: 10px;
        font-size: 14px;
        text-align: center;
        color: #7a7a7a;
    }
    .introduce .months-income{
        list-style-type: none;
        margin-top: 5px;
    }
    .introduce .months-income li{
        float: left;
        width: 25%;
        background-color: #fff;
    }
    .introduce .months-income li > .title{
        line-height: 36px;
        margin-top: 14px;
        color: #7a7a7a;
        text-align: center;
    }
    .introduce .months-income li > .content{
        line-height: 46px;
        color: #121212;
        text-align: center;
    }
    .detail-box{
        margin-top: 20px;
    }
    .detail-box > .title{
        line-height: 34px;
        text-indent: 10px;
        color: #7a7a7a;
    }
    .operate{
        position: fixed;
        width: 100%;
        bottom: 0px;
    }
    .operate .consult,.operate .subscribe{
        padding: 14px 0px;
        margin: 0px;
        width: 50%;
    }
}
</style>
